<template>
  <div>
    <el-button type="primary" @click="print"> 打印页面</el-button>
    <el-button type="primary" @click="printImg"> 打印图片</el-button>
    <el-button type="primary" @click="test">sessageStorage值测试</el-button>
    <br>
    <br>
 <!--   <div id="pdfDom" ref="pdfWrapper">

      <div
        class="echart"
        id="mychart"
        :style="{ width: '100%', height: '400px' }"
      ></div>

      <el-button>
        321
      </el-button>
    </div>-->

    <div ref="imageWrapper" class="test" id="demo">

      <div
        class="echart"
        id="mychart"
        :style="{ width: '100%', height: '400px' }"
      ></div>

      <el-button>
        321
      </el-button>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123</div>
      <div>123456</div>
    </div>
   <!-- <el-card style="margin-bottom: 30px">
      <el-row style="margin-bottom: 10px">
      </el-row>
      <el-row>
        <el-col :span="24">
          <canvas id="testCanvas" width="1450px" height="1600px" style="border:1px solid #cccccc;"></canvas>
        </el-col>
      </el-row>
    </el-card>-->

  </div>

</template>

<script>
  import * as echarts from "echarts";
  import * as html2canvas from "html2canvas"
  export default {
    name: "canvas",
    created() {

    },
    mounted(){
      // this.myEcharts();
      this.initEcharts();
    },
    data(){
      return{

      }
    },
    methods: {
      test(){
        sessionStorage.setItem("item","item")
      },
      print () {
        this.getPdf()
      },
      printImg(){
        this.getImg("#imgDom")
      },
      initEcharts() {
        const option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          legend: {
            data: ['line1', 'line2']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: 'line1',
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              smooth: true
            },
            {
              name: 'line2',
              data: [82, 93, 90, 134, 129, 222, 135],
              type: 'bar',
              smooth: true
            }
          ]
        };
        const myChart = echarts.init(document.getElementById("mychart"));// 图标初始化
        myChart.setOption(option);// 渲染页面
        myChart.setOption(option);// 渲染页面
        myChart.setOption(option);// 渲染页面
        myChart.setOption(option);// 渲染页面
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
     /* toPdfAndDownload() {
        let uuid = this.uuid()
        // 截图区域是testCanvas
        html2canvas(document.getElementById('testCanvas'), {
          background: "#ffffff",
          useCORS: true,
        }).then(function (canvas) {
          let contentWidth = canvas.width;
          let contentHeight = canvas.height;
          let imgWidth = 595.28;
          let imgHeight = 592.28 / contentWidth * contentHeight;
          let pageData = canvas.toDataURL('image/jpeg', 1.0);
          let pdf = new jsPDF('', 'pt', 'a4');
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
          pdf.save(uuid + '**************.pdf');
        })
      },

      uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4";   // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);   // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";
        return s.join("");
      },*/

    }
  }
</script>

<style scoped >
.test{

  width: 80%;
  /*height: 500px ;*/
  /*overflow: auto;*/
  /*放在盒子里 打印显示不全 原因未知 先放一下*/
}
</style>
